import { Button, notification, Popconfirm } from 'antd';
import { useState, useRef } from 'react';
import { composeValidators, required, mustNumber, numberLength } from '../../libs/form';

export default function AntDome() {
  const openNotification = () => {
    notification.open({
      message: 'Notification Title',
      description:
        'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
      onClick: () => {
        console.log('Notification Clicked!');
      },
    });
  };
  const [visible, setVisible] = useState(false);
  const [erroMsg, setErrorMsg] = useState('');
  const [confirmLoading, setConfirmLoading] = useState(false);
  const refInput = useRef(null);

  const showPopconfirm = () => {
    setVisible(true);
  };

  const handleOk = () => {
    setConfirmLoading(true);
    setTimeout(() => {
      setVisible(false);
      setConfirmLoading(false);
    }, 2000);
  };

  const handleCancel = () => {
    console.log('Clicked cancel button');
    setVisible(false);
  };

  const openText = () => {
    const val = refInput.current?.value.trim();
    const msg = composeValidators(required, mustNumber, numberLength(4))(val);
    console.log(msg);
    setErrorMsg(msg);
  };

  return (
    <div className={'ant_demo_container p20'}>
      <div className="box">
        <Button type="primary" onClick={openNotification}>
          Open the notification box
        </Button>
      </div>
      <div className={'box'}>
        <Button type="primary" onClick={openText}>
          click me
        </Button>
        <div className={'flex flex-col'}>
          <input
            className={'my-4 w-1/4 h-8 rounded-sm border-gray-700'}
            ref={refInput}
            type="text"
            placeholder="请输入"
          />
          {erroMsg && <span className={'w-1/4 text-red-700 text-xs'}>{erroMsg}</span>}
        </div>
      </div>
      <div className="box">
        <Popconfirm
          title="Title"
          visible={visible}
          onConfirm={handleOk}
          okButtonProps={{ loading: confirmLoading }}
          onCancel={handleCancel}
        >
          <Button type="primary" onClick={showPopconfirm}>
            Open Popconfirm with async logic
          </Button>
        </Popconfirm>
      </div>
    </div>
  );
}
